<template>
  <div>
    <div class="query">
      <div class="top">
        <div class="lef">
          <img src="../../assets/images/query.png" alt="" />
        </div>
        <div class="cen">
          <span> 筛选查询 </span>
        </div>
        <div class="rig">
          <p>查询结果</p>
        </div>
      </div>
      <div class="bot">
        <div class="lef">
          <p>项目编号 :</p>
          <input type="text" placeholder="输入项目编号" />
        </div>
        <div class="rig">
          <p>项目状态 :</p>
          <select name="" id="">
            <option value="请选择">请选择</option>
            <option value="进行中">进行中</option>
            <option value="已延迟">已延迟</option>
            <option value="已完成">已完成</option>
          </select>
        </div>
      </div>
    </div>
    <div class="list">
      <div class="top">
        <div class="lef">
          <img src="../../assets/images/query.png" alt="" />
        </div>
        <div class="cen">
          <span> 数据列表 </span>
        </div>
        <div class="rig">
          <p>新增</p>
        </div>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="number" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="zip" label="项目编号" width="120">
        </el-table-column>
        <el-table-column prop="project" label="项目名称" width="120">
        </el-table-column>
        <el-table-column prop="name" label="项目负责人" width="120">
        </el-table-column>
        <el-table-column prop="current" label="当前阶段" width="120">
        </el-table-column>
        <el-table-column prop="status" label="项目状态" width="300">
        </el-table-column>
        <el-table-column prop="date" label="开始日期" width="150">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >跟进</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- Pagination 分页 -->
      <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
        <p>Axure原型设计与制作 因为兴趣 所以热爱</p>
        <p>We Chat：13182867326</p>
        <p>文档未经授权禁止商业使用</p>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },

  data() {
    let user = {
      number: 1,
      date: "2016-05-02",
      name: "王小虎",
      project: "项目一",
      current: "需求对接",
      status: "进行中",
      zip: 10000,
    };
    return {
      tableData: Array(10).fill(user),
    };
  },
};
</script>

<style lang="scss" scoped>
  .query {
    width: 1366px;
    height: 107px;
    margin: 20px 0 50px 0;
    .top {
      display: flex;
      background-color: rgba(242, 242, 242, 1);
      height: 51px;
      align-items: center;
      position: relative;
      .lef {
        margin: 0 20px;
      }
      .rig {
        position: absolute;
        right: 40px;
        color: #63b9be;
        display: flex;
        align-items: center;
        p {
          width: 73px;
          height: 36px;
          line-height: 36px;
          background-color: #fff;
          text-align: center;
          cursor: pointer;
        }
      }
    }
    .bot {
      display: flex;
      line-height: 56px;
      color: #999;
      border: 2px solid rgba(228, 228, 228, 1);
      border-top: none;
      .lef {
        display: flex;
        input {
          width: 141px;
          height: 40px;
          text-align: center;
          outline: none;
          border-style: solid;
          border-color: rgba(228, 228, 228, 1);
          border-radius: 1px;
          outline-style: none;
          margin: 8px 100px 0 10px;
        }
      }
      .rig {
        display: flex;
        select {
          width: 141px;
          height: 40px;
          text-align: center;
          margin: 8px 0px 0 10px;
          outline: none;
          border-style: solid;
          border-color: rgba(228, 228, 228, 1);
        }
      }
    }
  }
  .list {
    width: 1366px;
    height: 107px;
    text-align: center;
    .top {
      display: flex;
      background-color: rgba(242, 242, 242, 1);
      height: 51px;
      align-items: center;
      position: relative;
      .lef {
        margin: 0 20px;
      }
      .rig {
        position: absolute;
        right: 40px;
        color: #63b9be;
        display: flex;
        align-items: center;
        p {
          width: 73px;
          height: 36px;
          line-height: 36px;
          background-color: #fff;
          text-align: center;
          cursor: pointer;
        }
      }
    }
    .pagination {
      margin: 50px 0 100px 0px;
      p{
        line-height: 20px;
        margin-top: 50px;
      }
    }
  }
</style>